<template>
	<view class="position-relative overflow">
		<view class="headbg" :style="{'paddingTop':statusBarHeight+'px'}"></view>
		<view :style="{'paddingTop':statusBarHeight+'px', 'height':titleBarHeight+'px'}"></view>
		<view class="px-5 z-index-10 position-relative mb-4">
			<view class="d-flex d-flex-between d-flex-middle">
				<view class="d-flex d-flex-middle">
					<image class="avatar" :src="avatar || 'https://cloud.whmoyun.com/static/images/avatar.png'" mode="aspectFill" @click="goUrl('pages','wxlogin')"></image>
					<view v-if="loginStatus" class="d-flex d-flex-column colorfff line-height40">
						<text class="font-bold font32" @click="goUrl('pages','wxlogin')">{{userName || nickName}}</text>
						<text @click="goUrl('pages','login')">{{phone}}</text>
					</view>
					<view v-else class="d-flex colorfff" @click="login()">
						<text class="font32">立即登录</text>
					</view>
				</view>
				<view class="d-flex">
					<view class="pt-3">
						<text class="colorfff iconfont icon-shezhitianchong"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="px-3 position-relative z-index-10">
			<view class="rounded20 p-2 bg-fff mb-3">
				<view class="d-flex font26">
					<view class="d-flex-item d-flex d-flex-column d-flex-center d-flex-middle">
						<text class="font-bold font32 color4a">0</text>
						<text class="color888">订单总数</text>
					</view>
					<view class="d-flex-item d-flex d-flex-column d-flex-center d-flex-middle">
						<text class="font-bold font32 color4a">0</text>
						<text class="color888">商品收藏</text>
					</view>
					<view class="d-flex-item d-flex d-flex-column d-flex-center d-flex-middle">
						<text class="font-bold font32 color4a">0</text>
						<text class="color888">我的足迹</text>
					</view>
					<view class="d-flex-item d-flex d-flex-column d-flex-center d-flex-middle">
						<text class="font-bold font32 color4a">0</text>
						<text class="color888">我的积分</text>
					</view>
				</view>
			</view>
			<view class="rounded20 py-2 px-3 bg-fff mb-3" @click="goUrl('pages','order')">
				<view class="py-1 tit-bm mb-3">
					<view class="d-flex d-flex-between d-flex-middle">
						<text class="color666">我的订单</text>
						<text class="iconfont icon-arrow-right1 colore5"></text>
					</view>
				</view>
				<view class="d-flex d-flex-between">
					<view class="d-flex d-flex-column d-flex-center d-flex-middle">
						<image class="o-icon" src="https://d1.shopxo.vip/static/app/yellow/user/order-icon-1.png"></image>
						<text class="color666 font26">待付款</text>
					</view>
					<view class="d-flex d-flex-column d-flex-center d-flex-middle">
						<image class="o-icon" src="https://d1.shopxo.vip/static/app/yellow/user/order-icon-2.png"></image>
						<text class="color666 font26">待发货</text>
					</view>
					<view class="d-flex d-flex-column d-flex-center d-flex-middle">
						<image class="o-icon" src="https://d1.shopxo.vip/static/app/yellow/user/order-icon-3.png"></image>
						<text class="color666 font26">待收货</text>
					</view>
					<view class="d-flex d-flex-column d-flex-center d-flex-middle">
						<image class="o-icon" src="https://d1.shopxo.vip/static/app/yellow/user/order-icon-4.png"></image>
						<text class="color666 font26">已完成</text>
					</view>
					<view class="d-flex d-flex-column d-flex-center d-flex-middle">
						<image class="o-icon" src="https://d1.shopxo.vip/static/app/yellow/user/order-icon-101.png"></image>
						<text class="color666 font26">退款/售后</text>
					</view>
				</view>
			</view>
			<view class="rounded20 py-2 bg-fff mb-3">
				<view class="px-3">
					<view class="tit-bm py-1">
						<view class="d-flex d-flex-middle d-flex-between">
							<text class="color666">我的服务</text>
							<text class="iconfont colorddd" :class="display?'icon-fenlei2':'icon-liebiaoxingshi'"></text>
						</view>
					</view>
				</view>
				<view class="row mt-3" v-if="display">
					<view v-for="(serve,index) in service" :key="index" class="span-5 d-flex d-flex-column d-flex-center d-flex-middle mb-3" @click="goUrl('pages','address')">
						<image class="f-icon" :src="serve.img"></image>
						<text class="color666 font26">{{serve.name}}</text>
					</view>
				</view>
				<view class="px-3" v-else>
					<view v-for="(serve,index) in service" :key="index" class="d-flex d-flex-between d-flex-middle s-item">
						<view class="d-flex d-flex-middle">
							<image class="s-icon" :src="serve.img"></image>
							<text class="color666 font26">{{serve.name}}</text>
						</view>
						<text class="iconfont icon-arrow-right1 colore5"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { useUserStore } from '@/store/modules/user.js';
import { computed,ref } from 'vue';
const loginStatus = computed(() => {
	return useUserStore().loginStatus;
});
const avatar = computed(() => {
	return useUserStore().headimgurl;
});
const userName = computed(() => {
	return useUserStore().userName;
});
const nickName = computed(() => {
	return useUserStore().wxName;
});
const phone = computed(() => {
	return useUserStore().mobile;
});
const statusBarHeight = computed(() => {
	return useUserStore().statusBarHeight;
});
const titleBarHeight = computed(() => {
	return useUserStore().titleBarHeight;
});
let display = ref(true)
let service = ref([{
					img:'https://d1cdn.shopxo.vip/static/upload/images/app_center_nav/2019/07/03/1562157390405145.png',
					name:'我的收藏'
				},{
					img:'https://d1cdn.shopxo.vip/static/upload/images/app_center_nav/2019/07/03/1562157391533252.png',
					name:'我的地址',
					pages:'pages',
					urls:'address'
				},{
					img:'https://d1cdn.shopxo.vip/static/upload/images/app_center_nav/2019/07/03/1562157391517979.png',
					name:'我的分销',
					pages:'pages',
					urls:'address'
				},{
					img:'https://d1cdn.shopxo.vip/static/upload/images/app_center_nav/2020/02/01/1580558516351420.png',
					name:'我的会员',
				},{
					img:'https://d1cdn.shopxo.vip/static/upload/images/app_center_nav/2020/02/01/1580558490671574.png',
					name:'我的钱包',
				},{
					img:'https://d1cdn.shopxo.vip/static/upload/images/app_center_nav/2019/10/16/1571231187362091.png',
					name:'我的卡券',
				},{
					img:'https://d1cdn.shopxo.vip/static/upload/images/app_center_nav/2019/07/03/1562157391428293.png',
					name:'我的留言'
				},{
					img:'https://d1cdn.shopxo.vip/static/upload/images/app_center_nav/2020/12/08/1607398361522502.png',
					name:'我的发票'
				},{
					img:'https://d1cdn.shopxo.vip/static/upload/images/app_center_nav/2020/12/22/1608608498784252.png',
					name:'我的签到'
				},{
					img:'https://d1.shopxo.vip/static/app/yellow/common/logout-icon.png',
					name:'退出账号'
				},{
					img:'https://d1.shopxo.vip/static/app/yellow/common/customer-service-icon.png',
					name:'联系客服'
				}])
function login(){
	uni.navigateTo({
		url:'/pagesApp/login/login'
	})
}
function goUrl(page,urls){
	let that = this
	if(loginStatus){
		uni.navigateTo({
			url:`/${page}/${urls}/${urls}`
		})
	}else{
		uni.showToast({
			title:'未登录，请先登录',
			icon:'none',
			duration:2000,
			complete() {
				setTimeout(()=>{
					uni.navigateTo({
						url:'/pages/login/login'
					})
				},2000)
			}
		})
	}
}
</script>

<style>
.headbg{
	background-color:#ff992a;
	position:fixed;
	top: 0;
	left: -25%;
	height: 340rpx;
	width: 150%;
	border-bottom-left-radius: 70%;
	border-bottom-right-radius: 70%;
	box-shadow: 1px 1px 32px 0px rgba(62,45,15,0.08)
}
.avatar{
	width:110rpx;
	height: 110rpx;
	border-radius: 100%;
	margin-right: 20rpx;
}
.tit-bm{
	border-bottom: 1px solid #f7f7f7;
}
.s-item{
	padding-top: 15rpx;
	padding-bottom: 15rpx;
	border-bottom: 1px solid #f7f7f7;
}
.s-item:last-child{
	border-bottom: 0;
}
.o-icon{
	width: 44rpx;
	height: 44rpx;
}
.f-icon{
	width: 44rpx;
	height: 44rpx;
}
.s-icon{
	width: 36rpx;
	height: 36rpx;
	margin-right: 10rpx;
}
</style>
